<script lang="ts" setup>
import type { ArticleVO } from '@/request/api/article'
import { RouteNameEnum } from '@/enum'

const router = useRouter()

const { data } = defineProps({
  data: {
    type: Array<ArticleVO>,
    default: []
  }
})

onMounted(() => {})
</script>

<template>
  <el-container
    v-for="(item, index) in data"
    :key="index"
    class="cursor-pointer use-second-bg use-shadow use-radius-sm h-80 use-transitions-shadow-short"
    direction="vertical"
    @click="
      router.push({
        name: RouteNameEnum.ARTICLE_DETAIL,
        params: { id: item.id }
      })
    "
  >
    <div class="h-44 flex relative justify-center items-center overflow-hidden w-full">
      <i
        v-if="item.hasVideo"
        class="iconfont pb-1 pt-1 bg-gray-900/60 px-5 use-radius-sm use-transitions-shadow absolute items-center z-10 text-4xl icon-play"
      />
      <ImageBox :url="item.cover" class="absolute hover-big" />
    </div>
    <el-container class="flex justify-between gap-1 p-3" direction="vertical">
      <SvgIcon
        :message="item.createTime?.toString()"
        name="edit"
        parentClass="min-w-4 text-sm"
        svg-class="!size-3.5"
      />
      <el-container class="!grid grid-cols-3 gap-1">
        <SvgIcon
          :message="'点赞' + item.likeCount"
          name="praise"
          parentClass="text-sm min-w-4 !gap-0.5"
          svg-class="!size-3.5"
        />
        <SvgIcon
          :message="'浏览' + item.viewCount"
          name="footprint"
          parentClass="text-sm min-w-4 !gap-0.5"
          svg-class="!size-3.5"
        />
        <SvgIcon
          :message="'评论' + item.commentCount"
          name="message"
          parentClass="text-sm min-w-4 !gap-0.5"
          svg-class="!size-3.5"
        />
      </el-container>
      <span class="text-lg font-semibold ellipsis-1">{{ item.title }}</span>
      <el-container class="flex-nowrap gap-1 items-center justify-between">
        <SvgIcon
          :message="item.label.classifyName"
          name="classify"
          parentClass="use-third-bg text-sm p-1 use-radius-xs use-transitions-shadow-short use-hover-bg"
          svg-class="!size-3.5"
          @click.stop="
            router.push({
              name: RouteNameEnum.ARTICLE,
              params: { classifyId: item.label.classifyId, labelId: item.label.id }
            })
          "
        />
        <SvgIcon
          :message="item.label.name"
          name="label"
          parentClass="use-third-bg text-sm p-1 use-radius-xs use-transitions-shadow-short use-hover-bg"
          svg-class="!size-3.5"
          @click.stop="
            router.push({
              name: RouteNameEnum.ARTICLE,
              params: { classifyId: item.label.classifyId, labelId: item.label.id }
            })
          "
        />
      </el-container>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped></style>
